<template>
  <h1>1.组件的基本写法</h1>
  fullName:{{ fullName }}
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
 
});
</script>

<script lang="ts" setup>
import {ref,computed } from "vue";
let firstName = ref("熊大");
let lastName = ref("熊二");
/* 
  设置一个只读的计算属性，使用computed方法，接受一个回调函数作为参数
  computed方法返回一个ref对象，模板中直接使用，setup中要加value
*/
let fullName = computed(()=>{
  console.log(1);
  //返回值是想要响应式数据相加
  return firstName.value + lastName.value;
});
console.log(fullName);

</script>
<style scoped></style>
